<template>
  <comPopover class="flex-col com-msg-center" @close="close">
    <div class="flex-row msg-title">
      <div>
        您有<span class="count" @click="toMsgCenter">{{ msgUnread }}</span
        >条新消息
      </div>
      <span class="more" @click="toMsgCenter">更多</span>
    </div>
    <span class="msg-box-divider"></span>
    <div class="msg-list" v-if="msgList">
      <div class="flex-row msg-row" v-for="(msgItem, index) in msgList" :key="index" @click="lookMsgDetail(msgItem)">
        <span class="msg-row-msg" :title="msgItem.msg">{{ msgItem.title }}</span>
      </div>
    </div>
    <div
      class="msg-dialog"
      v-if="msgDialogVisible"
      ref="drawRef"
      :class="dialogClassName"
      @mouseenter="newDra"
      @click="selectDialog"
    >
      <div class="msg-dialog-title">
        <p>消息详情</p>
        <img src="@/assets/img/home/icon_close.png" alt="" @click="closeMsgDialog" />
      </div>
      <div class="msg-dialog-line"></div>
      <div class="msg-dialog-content">
        <p class="msg-dialog-content-title">{{ msgDetailText.created_at }}</p>
        <p class="msg-dialog-content-text">{{ msgDetailText.content }}</p>
        <p class="look-detali" @click="goApplyDetail">点击查看</p>
      </div>
    </div>
  </comPopover>
</template>
<script lang="ts" setup>
import {ref, onMounted, nextTick, watch} from 'vue';
import comPopover from '@/components/comPopover/comPopover.vue';
import store from '@/store';
import router from '@/router';
import personalApi from '@/api/personalApi';
import UseDraggable from '@/utils/useDraggableElem';

const emit = defineEmits(['close']);

const msgList = ref([]);
const msgUnread = ref('');
const msgDialogVisible = ref(false);
const msgDetailText = ref('');

onMounted(() => {
  getMsgList();
  getMsgUnread();
});

const getMsgList = () => {
  personalApi
    .newsList({is_read: 0})
    .then((res) => {
      if (res.status === 0) {
        msgList.value = res.data.data;
      }
    })
    .catch((err) => {
      throw err;
    });
};
const getMsgUnread = () => {
  personalApi
    .newsUnread()
    .then((res) => {
      if (res.status === 0) {
        msgUnread.value = res.data;
        store.commit('setMessageCount', res.data);
      }
    })
    .catch((err) => {
      throw err;
    });
};
/**
 * 跳转到消息列表
 */
const toMsgCenter = () => {
  router.push('/msgCenter');
  close();
};
/**
 * 查看消息详情
 * @param {string} item
 */
const lookMsgDetail = (item) => {
  msgDialogVisible.value = !msgDialogVisible.value;
  msgDetailText.value = item;
  personalApi
    .markRead({id: item.id, type: 'single'})
    .then((res) => {
      if (res.status === 0) {
        getMsgList();
        getMsgUnread();
      }
    })
    .catch((err) => {
      throw err;
    });
};

/**
 * 跳转到审批列表
 */
const goApplyDetail = () => {
  router.push({name: 'applyManage'});
  msgDialogVisible.value = !msgDialogVisible.value;
};
/**
 * 关闭消息弹窗
 */
const closeMsgDialog = () => {
  msgDialogVisible.value = !msgDialogVisible.value;
  close();
};

const close = () => {
  emit('close');
};

// 拖拽相关
const dialogClassName = ref('dialogClassName');
let draggable;

const setUseDraggable = () => {
  dialogClassName.value += store.state.dialogClassNameCount;
  store.commit('changeDialogClassNameCount', 1);
  const params = {
    fatherSelector: dialogClassName.value,
  };
  nextTick(() => {
    draggable = new UseDraggable(params);
    const sonDom = document.getElementsByClassName(dialogClassName.value)[0];
    sonDom.parentNode.style.zIndex = store.state.dialogzIndex;
  });
};
const newDra = () => {
  const params = {
    fatherSelector: dialogClassName.value,
  };
  // eslint-disable-next-line no-new
  new UseDraggable(params);
};

const selectDialog = () => {
  try {
    const sonDom = document.getElementsByClassName(dialogClassName.value)[0];
    sonDom.parentNode.style.zIndex = store.state.dialogzIndex;
    store.commit('changeDialogzIndex', 1);
  } catch {}
};

watch(
  () => msgDialogVisible.value,
  (newVal) => {
    if (newVal && draggable !== '') {
      // 元素拖拽
      draggable = setUseDraggable();
    }
  },
);
</script>

<style lang="scss" scoped>
.com-msg-center {
  width: 331px;
  min-height: 276px;
  padding: 18px 20px;
  justify-content: flex-start;
  background: #ffffff !important;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06), 0px 2px 6px 6px rgba(0, 0, 0, 0.02),
    0px -2px 4px 0px rgba(0, 0, 0, 0.02);
}
.msg-box {
  &-divider {
    margin-top: 14px;
  }
}

.msg-title {
  font-size: 15px;
  justify-content: space-between;
  width: 100%;
  color: #333333;
  .count {
    color: #000;
    font-weight: bold;
    margin: 0 5px;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
  .more {
    color: rgb(76, 150, 255);
    font-size: 13px;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
}
.msg-list {
  width: 100%;
  .msg-row {
    height: 50px;
    width: 100%;
    padding-left: 20px;
    align-items: center;
    justify-content: flex-start;
    border-top: 1px solid rgba(64, 83, 107, 0.3);
    cursor: pointer;

    &-msg {
      color: #666666;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &:hover {
      opacity: 0.8;
      .msg-row-msg {
        color: #1890ff;
        text-decoration: underline;
      }
    }
    &-status {
      min-width: 20px;
      height: 50px;
      position: relative;
      &--unread {
        width: 8px;
        height: 8px;
        background: #ff5c5e;
        border-radius: 8px;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
.msg-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 486px;
  min-height: 235px;
  background: rgba(14, 24, 52, 0.8);
  border-radius: 2px;
  &-title {
    display: flex;
    margin: 10px 0;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    box-sizing: border-box;
    color: #fff;
    > img {
      width: 21px;
      height: 21px;
      cursor: pointer;
    }
  }
  &-line {
    width: 100%;
    height: 1px;
    background: #294a7b;
  }
  &-content {
    padding: 10px 33px;
  }
}
.look-detali {
  text-align: center;
  color: #1182fb;
  text-decoration: underline;
  cursor: pointer;
}
</style>
